import { MyHead } from "../../../components/head"
import { Swiper, Tabs } from "antd-mobile"
import { useState, useEffect } from 'react'
import { getBanners } from "../../../api/banner";
import { useTiaoZhuan } from "../../../hooks/routers";
import MyLoad from "../../../components/myLoad";
import MyList from "../../../components/myList";
import { getmsLIst } from "../../../api/home";
import '../../../styles/homes/admin.scss'
const Admin = () => {
    const { Tz } = useTiaoZhuan();
    const [res, setres] = useState<addmsType[]>([]);
    const [type, setTypeKey] = useState('1')
    const [total, setTotal] = useState(0)
    const [list, setList] = useState<addmsType[]>([])
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(10)
    const getImg = async () => {
        let data = await getBanners();
        setres(data.result)
    }
    const getHomeData = async (options: any) => {
        let res = await getmsLIst(options)
        if (res.code == 200) {
            setTotal(res.total)
            if(type == '2'){
                setList(res.result.sort((a,b)=>(new Date(b.date).getTime()) - (new Date(a.date).getTime())))
                return
            }
            setList(res.result)
        }
    }
    const reverserList = () => {
        list.reverse()
        setList([...list])
    }

    const loadMoreData = async (callback?: any) => {
        setPage(page + 1)  // 请求下一页数据 

        let res = await getmsLIst({
            page,
            pageSize,
            type,
        })
        if (res.code == 200) {
            if (res.result.length > 0) {
                console.log(res.result);
                console.log(list);

                setList([...list, ...res.result]); // concat  拼接  如果没有 
            } else {
                callback()
            }
        }
    }
    useEffect(() => {
        getHomeData({
            type,
            page: 1,
            pageSize
        })
        setPage(1)
    }, [type])

    useEffect(() => {
        getImg()
    }, [])
    return (
        <div className="adminBox">
            <MyHead title='首页' noBack={false} />
            <Swiper
                style={{ paddingTop: '50px' }}
                loop
                autoplay
            >
                {res.map((item, index) =>
                    <Swiper.Item key={index} onClick={() => Tz(`/detail/${item._id}?canpany=${item.campany}`)}>

                        <img src={(item.imgs[0] as { imgSrc: string }).imgSrc?.replace('public', 'http://192.168.57.160:3333')} alt="" className="content" />
                    </Swiper.Item>
                )}
            </Swiper>
            <div className="homemain" >
                <Tabs activeKey={type} onChange={setTypeKey}>
                    <Tabs.Tab title='最热面试' key='1'>
                        <MyLoad reverserList={reverserList} loadMoreData={loadMoreData}>
                            <MyList list={list} isHot={true}    ></MyList>
                        </MyLoad>

                    </Tabs.Tab>
                    <Tabs.Tab title='最新面试' key='2'>
                        <MyLoad reverserList={reverserList} loadMoreData={loadMoreData}>
                            <MyList list={list} isTime={true}  ></MyList>
                        </MyLoad>
                    </Tabs.Tab>
                </Tabs>
            </div>
        </div>
    )
}

export default Admin